<template>
  <PageTable
    :search-options="options"
    :columns="columns.filter(({ checked }) => checked)"
    :data-source="sourceData"
    :loading="spinning"
    :row-selection="{ selectedRowKeys, onChange: setSelectedRowKeys }"
    :pagination="{
      current: pagination.pageNum,
      pageSize: pagination.pageSize,
      total: pagination.total,
      onChange: onPageChange
    }"
    @search="onSearchData"
  >
    <template #searchCollapse>
      <AForm layout="inline" ref="formRef" :model="formState" @finish="onSearchData" @reset="onReset">
        <AFormItem label="用户名称" name="userName">
          <AInput v-model:value="formState.userName" placeholder="请输入用户名称"></AInput>
        </AFormItem>
        <AFormItem label="登录地址" name="ipAddress">
          <AInput v-model:value="formState.ipAddress" placeholder="请输入登录地址"></AInput>
        </AFormItem>
        <AFormItem label="登录地点" name="loginLocation">
          <AInput v-model:value="formState.loginLocation" placeholder="请输入登录地点"></AInput>
        </AFormItem>
        <AFormItem>
          <ASpace>
            <AButton html-type="reset">重置</AButton>
            <AButton type="primary" html-type="submit">搜索</AButton>
          </ASpace>
        </AFormItem>
      </AForm>
    </template>
    <template #operate>
      <ASpace>
        <APopconfirm
          title="您确定批量删除数据吗?"
          ok-text="是"
          cancel-text="否"
          @confirm="() => onDelete(selectedRowKeys)"
        >
          <AButton danger ghost :icon="createVNode(DeleteOutlined)" :disabled="!selectedRowKeys.length">删除</AButton>
        </APopconfirm>
      </ASpace>
      <ASpace>
        <ATooltip title="刷新列表">
          <AButton :icon="createVNode(ReloadOutlined)" :disabled="!!timer" @click="onRefreshData">
            {{ timer || '' }}
          </AButton>
        </ATooltip>
        <RDropdownCheckbox
          placement="bottomRight"
          v-model:value="columns"
          :fieldNames="{ label: 'title', value: 'key', checked: 'checked' }"
        >
          <AButton :icon="createVNode(AppstoreOutlined)"></AButton>
        </RDropdownCheckbox>
      </ASpace>
    </template>
    <template #bodyActionCell="{ record }">
      <APopconfirm title="您确定删除该数据吗?" ok-text="是" cancel-text="否" @confirm="() => onDelete([record.infoId])">
        <AButton type="link" danger size="small" :icon="createVNode(DeleteOutlined)">删除</AButton>
      </APopconfirm>
    </template>
  </PageTable>
</template>

<script setup>
import { createVNode, ref, reactive, toValue, onBeforeMount } from 'vue';
import { PageTable } from '@/components/templates';
import { RDropdownCheckbox } from '@/components/custom';

import { DeleteOutlined, AppstoreOutlined, ReloadOutlined } from '@ant-design/icons-vue';
import { useState, useFetchPageData } from '@/hooks';
import { fetchGetInfoList, fetchDeleteInfo } from '@/api/system/logLogin';

const options = [
  { label: '综合搜索', value: 'keyword', placeholder: '综合搜索' },
  { label: '用户名称', value: 'userName', placeholder: '请输入用户名称' },
  { label: '登录地址', value: 'ipAddress', placeholder: '请输入登录地址' },
  { label: '登录地点', value: 'loginLocation', placeholder: '请输入登录地点' },
  { label: '浏览器类型', value: 'browser', placeholder: '请输入浏览器类型' },
  { label: '操作系统', value: 'os', placeholder: '请输入操作系统' }
];

const defaultColumns = [
  { key: 'index', title: '序号', dataIndex: 'index', checked: true },
  { key: 'infoId', title: 'ID', dataIndex: 'infoId' },
  { key: 'userName', title: '用户名称', dataIndex: 'userName', checked: true },
  { key: 'ipAddress', title: '登录地址', dataIndex: 'ipAddress', checked: true },
  { key: 'loginLocation', title: '登录地点', dataIndex: 'loginLocation', checked: true },
  { key: 'browser', title: '浏览器类型', dataIndex: 'browser', checked: true },
  { key: 'os', title: '操作系统', dataIndex: 'os', checked: true },
  { key: 'statusName', title: '状态名称', dataIndex: 'statusName', checked: true },
  { key: 'loginTime', title: '访问时间', dataIndex: 'loginTime', checked: true },
  { key: 'action', title: '操作', checked: true }
];
const columns = ref(defaultColumns);

const initValues = { userName: '', ipAddress: '' };
const formRef = ref();
const formState = reactive(initValues);
const [selectedRowKeys, setSelectedRowKeys] = useState([]);
const {
  sourceData,
  spinning: spinning,
  pagination,
  timer,
  onFetchData,
  onSearchData,
  onPageChange,
  onResetData,
  onRefreshData
} = useFetchPageData(fetchGetInfoList);

onBeforeMount(() => {
  onFetchData();
});

const onReset = () => {
  onResetData();
  toValue(formRef).resetFields();
};

const onDelete = async (values) => {
  await fetchDeleteInfo(values);
  onRefreshData(true);
};
</script>

<style lang="scss" scoped></style>
